<template>
  <div class="floating-btn">
    <div class="flex items-center">
      <el-checkbox v-model="check" class="h-5 pt-[1px]"></el-checkbox>
      <div class="text-sm/22px text-[#393c40] ml-1">
        已选中{{ selectedIds.length }}个
      </div>
      <el-divider direction="vertical" class="mx-3" />
      <div
        class="flex items-center gap-x-1 text-[#393C40] cursor-pointer"
        @click="emit('batch-download', selectedIds)"
      >
        <app-icon name="download"></app-icon>
        <span>批量下载</span>
      </div>
      <el-divider direction="vertical" class="mx-3" />
      <div
        class="flex items-center cursor-pointer gap-x-1"
        @click="emit('batch-delete', selectedIds)"
      >
        <app-icon name="delete" color="#F53F3F"></app-icon>
        <span class="text-[#F53F3F]">批量删除</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
interface IProps {
  selectedIds: any[]
}
const props = defineProps<IProps>()
// 刷新表格事件
interface IEmit {
  (event: 'batch-download', value: string[]): void
  (event: 'batch-delete', value: string[]): void
  (event: 'clear-select-ids'): void
}
const emit = defineEmits<IEmit>()
const check = ref(false)
watchEffect(() => {
  if (props.selectedIds.length > 0) {
    check.value = true
  } else {
    check.value = false
  }
})
watch(
  () => check.value,
  val => {
    if (!val) emit('clear-select-ids')
  },
  {
    deep: true
  }
)
</script>

<style lang="scss" scoped>
.floating-btn {
  @apply min-w-[209px] h-[46px] absolute bottom-[64px] left-[50%] -translate-x-[50%] -translate-y-[50%] bg-white z-10 rounded-[46px] flex items-center py-3 px-4;
  box-shadow: 0px 4px 10px 0px rgba(29, 33, 41, 0.1);
  font-size: 14px;
}
</style>
